<template> 
  <div>
    <Header :left="true" title="智能制造V2.0执行处理消息" leftText="返回" />
    <div style="margin-top: 0px;">
      <van-tabs v-model="active" type="card" :offset-top="80" :sticky="true" style="top:8px;font-size:15px;"
        color="#1c6c8d" @click="onClick">
        <van-tab title="待处理" style="font-size:12px;">
          <div class="textScroll2">
            <div v-for="item in itemsRead" :key="item.id" style="margin-bottom:5px;">
              <div class="divStyle">
                <van-row style="margin-top:10px;">
                  <van-col span="8" style="font-weight:bold;color:#A9A9A9;margin-left:5px;">{{
                    item.newsType
                  }}</van-col>
                  <van-col span="30" style="color:#A9A9A9;margin-left:50px"><van-icon name="assets/time.png" /> {{
                    item.createTime }}</van-col>
                </van-row>
                <van-divider />
                <van-row>
                  <van-col span="10" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;">发起人：{{ item.sendUser
                  }}</van-col>
                  <van-col span="60" style="color:#A9A9A9;float:right;">
                    <van-button @click="queryFileById(item.relationId, item.newsType)"
                      v-show="item.newsType.indexOf('资源') != -1 || item.newsType.indexOf('修') != -1 ? true : false"
                      :block="false" style="height:30px;background-color:#00BFFF;border-color:#00BFFF" type="primary"
                      text="多媒体信息" />
                  </van-col>
                </van-row>
                <van-row>
                  <van-col span="100" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;margin-top:10px;">消息内容：{{
                    item.newsDesc }}</van-col>
                </van-row>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已处理" style="font-size:12px;">
          <div class="textScroll2">
            <div v-for="item in itemsRead" :key="item.id" style="margin-bottom:5px;">
              <div class="divStyle">
                <van-row style="margin-top:10px;">
                  <van-col span="8" style="font-weight:bold;color:#A9A9A9;margin-left:5px;">{{
                    item.newsType
                  }}</van-col>
                  <van-col span="30" style="color:#A9A9A9;margin-left:50px"><van-icon name="assets/time.png" /> {{
                    item.createTime }}</van-col>
                </van-row>
                <van-divider />
                <van-row>
                  <van-col span="10" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;">发起人：{{ item.sendUser
                  }}</van-col>
                  <van-col span="60" style="color:#A9A9A9;float:right;">
                    <van-button @click="queryFileById(item.relationId, item.newsType)"
                      v-show="item.newsType.indexOf('资源') != -1 || item.newsType.indexOf('修') != -1 ? true : false"
                      :block="false" style="height:30px;background-color:#00BFFF;border-color:#00BFFF" type="primary"
                      text="多媒体信息" />
                  </van-col>
                </van-row>
                <van-row>
                  <van-col span="100" style="color:#A9A9A9;margin-left:5px;margin-bottom:5px;margin-top:10px;">消息内容：{{
                    item.newsDesc }}</van-col>
                </van-row>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import {
  SwipeCell,
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  ImagePreview,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  popup,
  Uploader,
  Loading,
} from 'vant'
Vue.use(SwipeCell)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(tab)
Vue.use(tabs)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Panel)
Vue.use(Toast)
Vue.use(Uploader)
Vue.use(popup)
Vue.use(Loading)
import { storage } from '@/libs/utils'
import Header from '@/components/header.vue'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
import { _httpClient } from '@/libs/api'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, tab, tabs, Col, Row, ImagePreview, popup },
  data() {
    return {
      detailShow: false,
      screenWidth: 0,
      checked: true,
      active: 2,
      fileUrl: '',
      itemsNotRead: [],
      itemsRead: [],
      //多媒体文件
      photoList: [
        //图片
      ],
      pictureNum: 0, //照片数量
      playing: '播放中...', //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      photoShow: false, //照片显示控制
      vedioShow: false, //视频显示控制
      audioShow: false, //语音显示控制
      vedioList: [], //视频
      remark: null,
      audioPath: '', //语音
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      queryParamsRead: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      user: {},
    }
  },
  created: function () {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    this.user = JSON.parse(storage.get('user'))
    let tkn = getToken()
    if (!tkn) {
      api.openWin({
        name: 'login',
        url: './login-login.html',
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      })
    }

    this.queryNotReadList()
  },
  methods: {
    async readed(id) {
      let _this = this
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
          '/app/message/messageInfo/isread',
          {
            body: { id: id },
          }
        )
        _this.itemsNotRead = [];
        await _this.queryNotReadList();

      } catch (e) {
        //Toast.fail(JSON.stringify(e))
      }
    },
    //视频播放
    playVedio(filePath) {
      let that = this;
      if (api.deviceName.toLowerCase() == "vivo" || api.deviceName.toLowerCase() == "oppo" || api.deviceName.toLowerCase() == "honor") {
        var videoPlayer = api.require("videoPlayer");
        videoPlayer.play(
          {
            path: filePath.trim(),
            autoPlay: true
          },
          function (ret, err) {

          }
        );
      } else {
        that.$ac.openVideo({
          url: filePath.trim(),
        });
      }
    },

    //语音播放
    playArm() {
      //判断是播放还是暂停
      if (!this.audioLoad) {
        this.audioLoad = true
        this.audioStop = false
        if (this.audioPath == '') {
          Dialog.alert({
            theme: 'round-button',
            message: '当前无语音信息',
          }).then(() => {
            // on close
          })
        }
        var audioStreamer = api.require('audioStreamer')
        let _this = this
        audioStreamer.addEventListener({}, function (ret) {
          if (ret.state == 'finished') {
            _this.audioLoad = false
            _this.audioStop = true
          }
        })
        if (api.systemType == 'ios') {
          api.download(
            {
              url: _this.audioPath,
            },
            function (res) {
              if (res.state == 1) {
                api.startPlay(
                  {
                    path: res.savePath,
                  },
                  function (ret, err) {
                    if (ret) {
                      // _that.activeAudio = ''
                    } else {
                      alert(JSON.stringify(err))
                    }
                  }
                )
              }
            }
          )
        } else {
          audioStreamer.openPlayer(
            {
              path: _this.audioPath,
            },
            function (ret) { }
          )
        }
      } else {
        var audioStreamer = api.require('audioStreamer')
        audioStreamer.pause()
        this.audioLoad = false
        this.audioStop = true
      }
    },

    picShow(pIndex) {
      ImagePreview({
        images: this.equipRepairVo.picList || [],
        showIndicators: true,
        startPosition: pIndex || 0,
        showIndex: false,
      })
    },
    pgn_change() {
      this.queryNotReadList()
    },
    pgn_change_read() {
      this.queryReadList()
    },
    readClick(item) {
      let _this = this
      try {
        for (let i = 0; i < _this.itemsNotRead.length; i++) {
          if (_this.itemsNotRead[i].id === item.id) {
            //调用后台已读字段更新方法
            _httpClient.post(_httpClient.getApiPrefix() + '/app/message/messageInfo/update', {
              body: { id: item.id, relationId: item.relationId },
            })
            _this.itemsNotRead.splice(i, 1)
            break
          }
        }
      } catch (e) {
        alert(JSON.stringify(e))
        Toast.fail(JSON.stringify(e))
      }
    },
    onClick(name, title) {
      if (name === 0) {
        this.queryParams.pageNum = 1
        this.queryNotReadList()
      }
      if (name === 1) {
        this.queryParams.pageNum = 1
        this.queryReadList()
      }
    },
    //查询未读信息
    async queryNotReadList() {
      //_this.itemsNotRead=[];
      //_this.queryParams.total=0;
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
          '/app/message/messageInfo/list?pageNum=' +
          this.queryParams.pageNum +
          '&pageSize=' +
          this.queryParams.pageSize,
          {
            body: { isRead: '0', notingUser: _this.user.userName },
          }
        )
        if (res.code === 200) {
          Toast.success(res.msg)
          _this.itemsNotRead = res.rows
          _this.queryParams.total = res.total
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    //查询多媒体信息
    async queryFileById(id, type) {
      if (type.indexOf('资源') != -1) {
        type = '1'
      } else {
        type = '2'
      }
      this.detailShow = true
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/message/messageInfo/queryFilelist', {
          body: { id: id, newsType: type },
        })

        if (res.code === 200) {
          Toast.clear()
          if (res.rows.length > 0) {
            //筛选图片、视频、录音
            let pictures = []
            let vedios = []
            let audios = []
            for (let i = 0; i < res.rows.length; i++) {
              this.remark = res.rows[i].remark
              if (res.rows[i].fileType == '0') {
                //照片
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  let num = 0
                  if (paths[j] != '') {
                    let picture = { url: paths[j] }
                    pictures.push(picture)
                    num++
                  }
                  _this.pictureNum = num
                }
                //显示照片
                _this.photoShow = true
              } else if (res.rows[i].fileType == '1') {
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    let vedio = { filePath: paths[j] }
                    _this.vedioList.push(vedio)
                  }
                }
                //视频
                _this.vedioShow = true
              } else if (res.rows[i].fileType == '2') {
                //语音
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    _this.audioPath = paths[j]
                    _this.audioShow = true
                    break
                  }
                }
              }
            }
            _this.photoList = pictures //照片数组赋值
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.clear()
        alert(JSON.stringify(e))
      }
    },
    //查询已读信息
    async queryReadList() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
          '/app/message/messageInfo/list?pageNum=' +
          this.queryParamsRead.pageNum +
          '&pageSize=' +
          this.queryParamsRead.pageSize,
          {
            body: { isRead: '1', notingUser: _this.user.userName },
          }
        )
        if (res.code === 200) {
          Toast.success(res.msg)
          _this.itemsRead = res.rows
          _this.queryParamsRead.total = res.total
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: white;
}

.divStyle {
  border: 1px solid #dcdcdc;
  margin-left: 3px;
  margin-right: 3px;
}

.divMedia {
  margin-top: 0px;
  height: 300px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 0px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.read-button {
  height: 100%;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 8rem;
  bottom: 5px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
}

.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 8rem;
  left: 0;
  bottom: 2px;
  overflow-y: scroll;
  width: 100%;
  margin-bottom: 4.7rem;
  z-index: 1;
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}
</style>
